<!DOCTYPE html>
<html lang="zh">

<head>
    <title>{block name="title"}{$title|default=''}{if !empty($title)} · {/if}{:sysconf('site_name')}{/block}</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.4">
    <link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/plugs/awesome/fonts.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/theme/css/console.css?at={:date('md')}">

</head>
<style>
    * {
        margin:0;
        padding:0;
    }
    html,body {
        height:100%;
        overflow:hidden;
        background-image:linear-gradient(200deg,#89E3F7 0%,#71A7F0 38%,#71A7F0 38%,#70A5F0 40%,#6C9CEE 45%,#4D68DC 91%);
    }
    .title{
        text-align: center;
        margin: 28px 0;
        color: #333;
        letter-spacing: 7px;
    }
    #con-countDown {
        color:#fff;
        font-size:0.64rem;
    }
    #con-countDown span {
        display:inline-block;
        margin-right:0.1rem;
    }
    .gundong {
        height:1.5rem;
        overflow:hidden;
        width:2rem;
        margin:1rem auto;
        position:relative;
    }
    .gundong ul {
        position:absolute;
        top:0;
        left:0;
        width:100%;
    }
    .gundong li {
        height:0.3rem;
        line-height:0.3rem;
        color:#ccc;
        font-size:0.14rem;
    }
    .gundong li.active {
        color:#fff
    }
    .table_box{
        margin: auto;
    }
    .table_title{
        font-size: 25px;
        background: #74abfd;
        text-align: center;
        color: #fff;
    }
    .table_title th{
        padding: 10px 42px;
        border: 1px solid #fff;
    }
    .table_content{
        font-size: 17px;
        text-align: center;
        background: #fdb585;
    }
    .table_content td{
        padding: 10px;
        border: 1px solid #fff;
    }
</style>
<body >
<div class="title">
    <h1>百度集团会议信息一览</h1>
</div>
<div>
    <table class="table_box">
        <tr class="table_title">
            <th>会议室</th>
            <th>主题</th>
            <th>日期</th>
            <th>时间</th>
            <th>预定人</th>
        </tr>
        {foreach $appointment as $k=>$v}
        {if $k%2==0}
        <tr class="table_content">
            <td>{$v.room}</td>
            <td>{$v.remake}</td>
            <td>{:format_datetime($v.star_time,'Y年m月d日')}</td>
            <td>{:format_datetime($v.star_time,'H:i:s')}—{:format_datetime($v.end_time,'H:i:s')}</td>
            <td>{$v.username}</td>
        </tr>
        {else}
        <tr class="table_content" style="background: #f9cb8b">
            <td>{$v.room}</td>
            <td>{$v.remake}</td>
            <td>{:format_datetime($v.star_time,'Y年m月d日')}</td>
            <td>{:format_datetime($v.star_time,'H:i:s')}—{:format_datetime($v.end_time,'H:i:s')}</td>
            <td>{$v.username}</td>
        </tr>
        {/if}
        {/foreach}
    </table>
</div>
<div class="gundong">

    <!--<ul>
        {foreach $appointment as $k=>$v}
        {if $k==0}
        <li class="active">{$v.username}预约了{:format_datetime($v.star_time,'Y年m月d H:i:s')}—{:format_datetime($v.end_time,'Y年m月d H:i:s')}在【{$v.remake}】开会</li>
        {else}
        <li>{$v.username}预约了{$v.star_time}~{$v.end_time}在【{$v.remake}】开会</li>
        {/if}
        {/foreach}
    </ul>-->
</div>




<script src="__ROOT__/static/plugs/layui/layui.all.js"></script>
<script src="__ROOT__/static/plugs/require/require.js"></script>
<script src="__ROOT__/static/admin.js"></script>
<script>
    //适配
    function shipei() {
        //适配
        if (innerWidth > 1920) {
            document.documentElement.style.fontSize = '100px';
        } else {
            document.documentElement.style.fontSize = 100 * (innerWidth / 1920) + 'px';
        }
        if (innerWidth < 751) {
            document.documentElement.style.fontSize = 100 * (innerWidth / 750) + 'px';
        }
    };
    shipei();
    window.onresize = function() {
        //适配
        shipei()
    };

    // JavaScript Document
    var liHeiight = $('.gundong li').height();
    var num = $('.gundong li').size()
    if (num < 6) {
        $('.gundong').css({
            'height': liHeiight * (num - 1)
        });
    };

    function gundong(val) {
        var clone = $('.gundong li').first().clone();
        $('.gundong ul').append(clone);
        $('.gundong li').removeClass('active');
        $('.gundong ul').stop().animate({
            top: -liHeiight
        }, 800, function() {
            $('.gundong ul').css({
                top: 0
            });
            $('.gundong li').eq(0).remove();
            $('.gundong li').eq(0).addClass('active');
        })
    };
    var t = setInterval(function() {
       // gundong();
    }, 1500);
</script>
</body>

</html>
